<template>
  <el-carousel indicator-position="outside">
    <el-carousel-item v-for="image in images" :key="image">
        <img :src="`../src/assets/images/${image}`" alt="Image" :width="700" :height="500"/>
    </el-carousel-item>
  </el-carousel>
<!--    <el-carousel indicator-position="outside">-->
<!--    <el-carousel-item v-for="image in images" :key="`carousel-${image}`">-->
<!--        <img :src="getImageUrl(image)" alt="Image" :width="700" :height="500"/>-->
<!--    </el-carousel-item>-->
<!--  </el-carousel>-->

  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    status-icon
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
  >
    <el-form-item label="用户名" prop="username">
      <el-input v-model="ruleForm.username" type="text" autocomplete="off" />
    </el-form-item>
    <el-form-item label="手机号" prop="mobile">
      <el-input v-model="ruleForm.mobile" type="number" autocomplete="off" />
    </el-form-item>
    <el-form-item label="密码" prop="pass">
      <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleForm)">
        登录
      </el-button>
      <el-button @click="resetForm(ruleForm)">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ElDialog, ElButton, ElInput, ElCheckbox, ElCheckboxGroup } from 'element-plus'
import axios from 'axios'
import { FormInstance, FormRules } from 'element-plus'

// 管理图片路径
// const imageUrlPrefix = '/assets/images/';
const images = ref(['3.png', '4.png', '5.png', '641.png'])

// 获取图片完整URL
// function getImageUrl(imageName: string): string {
//   return imageUrlPrefix + imageName;
// }

// const showRegisterModal = ref(false) // 控制模态窗口的显示状态

// const registerForm = ref({
//   username: '',
//   mobile: '',
//   password: '',
//   confirmPassword: '',
//   roles: [] // 角色复选框的值
// })
// const registerRules = reactive({
//   username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
//   mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
//   password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
//   confirmPassword: [{ required: true, message: '请再次输入密码', trigger: 'blur' }]
// })
// const registerFormRef = ref<ElFormInstance | null>(null)

// const handleClose = () => {
//   showRegisterModal.value = false
// }

// const submitRegisterForm = () => {
//   registerFormRef.value.validate((valid) => {
//     if (valid) {
//       // 提交注册表单的逻辑
//       console.log('提交注册表单', registerForm.value)
//       // 关闭模态窗口
//       handleClose()
//     }
//   })
// }
// const images = ref(['3.png', '4.png', '5.png', '641.png'])

// 验证密码的函数
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
   } else {
    // if (ruleForm.checkPass !== '') {
    //   if (!ruleFormRef.value) return
    //   ruleFormRef.value.validateField('checkPass')
    //  }
    callback()
   }
}


const ruleForm = reactive({
  pass: '',
  username: '',
  mobile: '',
})

const rules = reactive<FormRules<typeof ruleForm>>({
  pass: [{ validator: validatePass, trigger: 'blur' }],
  // checkPass: [{ validator: validatePass2, trigger: 'blur' }],
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      const { username, mobile, pass } = ruleForm
      http.post('login/', { username, mobile, pass })
         .then(response => {
          console.log('登陆成功', response)
           // 处理登录成功逻辑，例如保存token或跳转到其他页面
         })
         .catch(error => {
          console.error('登陆失败', error)
           // 处理登录失败逻辑
         })
     } else {
      console.log('信息提交失败！')
     }
   })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>


<style scoped>
.el-carousel__item h3 {
   display: flex;
   color: #475669;
   opacity: 0.75;
   line-height: 300px;
   margin: 0;
}
</style>